{% extends 'web/layout/basic.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
    <style>
        .error-msg {
            color: red;
            font-size: 13px;
            position: absolute;
        }
    </style>
{% endblock %}

{% block title %}短信登录{% endblock %}
{% block content %}
    <div class="account">
        <div class="title">短信登录</div>
        <form method="post" id="form" novalidate>
            {% csrf_token %}
            {% for foo in form %}
                {% if foo.name == 'code' %}
                    <div class="form-group">
                        {#           {{ foo.id_for_label }}表示当你点击这个label时候对应的id就可以获取到input里面的内容 #}
                        <label for="{{ foo.id_for_label }}">{{ foo.label }}</label>
                        {#            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">#}
                        <div class="clearfix">
                            <div class="col-md-6" style="padding-left: 0">{{ foo }}<span class="error-msg"></span></div>

                            <div class="col-md-6"><input type="button" class="btn btn-default" id="btnSms"
                                                         value="点击获取验证码"></div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        {#           {{ foo.id_for_label }}表示当你点击这个label时候对应的id就可以获取到input里面的内容 #}
                        <label for="{{ foo.id_for_label }}">{{ foo.label }}</label>
                        {#            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">#}
                        {{ foo }}
                        <span class="error-msg"></span>
                    </div>
                {% endif %}
            {% endfor %}
            <div class="row">
                <div class="col-xs-3">
                    <input id='btnSubmit' type="button" value="登 录" class="btn btn-primary">
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            bindClickBtnSms();
            bindClickSubmit();
        })

        // 点击获取验证码
        function bindClickBtnSms() {
            $('#btnSms').click(function () {
                $('.error-msg').empty();
                // 获取用户输入手机号
                var phone = $('#id_phone').val()

                // 发送ajax请求
                $.ajax({
                    url: "/semd_sms", // 提交地址
                    type: "GET",    // 类型
                    data: {tpl: 'login', phone: phone},    // 传递参数
                    dataType: "JSON",    //将服务器返回的数据反序列化
                    success: function (res) {
                        // 发送成功回调函数
                        // console.log(res);
                        if (res.status) {
                            sendSmsRemind();
                        } else {
                            // 错误信息 表示每循环一次就执行这个函数
                            // key 就是字典名字,value值 {static:False,error:{phone:['错误信息',]}}
                            $.each(res.error, function (key, value) {
                                // 因为使用modelform生成的所有每个input都包含一个id加上name名字,所以使用拼接出一个任何选择它的下一个元素进行赋值
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

        // 登录按钮绑定事件
        function bindClickSubmit() {
            $('#btnSubmit').click(function () {
                $('.error-msg').empty();
                // 获取表单数据 循环input
                $('#form').serialize()  // 获取所有表单里面的数据 携带了csrf_token

                // 通过ajax发送后台
                $.ajax({
                    url: "/login/sms",
                    type: "POST",
                    data: $('#form').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            location.href = res.data;
                        } else {
                            $.each(res.error, function (key, value) {
                                // 因为使用modelform生成的所有每个input都包含一个id加上name名字,所以使用拼接出一个任何选择它的下一个元素进行赋值
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

        // 验证码发送成功读秒
        function sendSmsRemind() {
            var $smsBtn = $('#btnSms');
            $smsBtn.prop('disabled', true);
            var time = 60;
            var remind = setInterval(function () {
                $smsBtn.val(time + '秒后重新发送')
                time = time - 1;
                if (time < 1) {
                    clearInterval(remind);
                    $smsBtn.val('点击获取验证码').prop('disabled', false);
                }
            }, 1000)
        }
    </script>

{% endblock %}
